<template>
    <div class="chart-container" ref="chartContainer"></div>
</template>

<script setup>
import { ref, onMounted, watch, onBeforeUnmount } from 'vue';
import * as echarts from 'echarts';

const props = defineProps({
    chartData: {
        type: Array,
        required: true,
        default: () => []
    }
});

const chartContainer = ref(null);
let chart = null;

const initChart = () => {
    if (!chartContainer.value) return;

    chart = echarts.init(chartContainer.value);

    const option = {
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'cross',
                crossStyle: {
                    color: '#999'
                }
            }
        },
        legend: {
            data: ['温度', '湿度'],
            textStyle: {
                color: '#666'
            }
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: [
            {
                type: 'category',
                data: props.chartData.map(item => item.time),
                axisPointer: {
                    type: 'shadow'
                },
                axisLine: {
                    lineStyle: {
                        color: '#999'
                    }
                },
                axisLabel: {
                    color: '#666'
                }
            }
        ],
        yAxis: [
            {
                type: 'value',
                name: '温度 (°C)',
                min: 0,
                max: 40,
                interval: 5,
                axisLine: {
                    lineStyle: {
                        color: '#f5222d'
                    }
                },
                axisLabel: {
                    formatter: '{value} °C',
                    color: '#666'
                },
                splitLine: {
                    lineStyle: {
                        type: 'dashed',
                        color: '#ddd'
                    }
                }
            },
            {
                type: 'value',
                name: '湿度 (%)',
                min: 0,
                max: 100,
                interval: 10,
                axisLine: {
                    lineStyle: {
                        color: '#1890ff'
                    }
                },
                axisLabel: {
                    formatter: '{value} %',
                    color: '#666'
                },
                splitLine: {
                    show: false
                }
            }
        ],
        series: [
            {
                name: '温度',
                type: 'line',
                yAxisIndex: 0,
                data: props.chartData.map(item => item.temperature),
                smooth: true,
                symbol: 'circle',
                symbolSize: 6,
                itemStyle: {
                    color: '#f5222d'
                },
                lineStyle: {
                    width: 3,
                    color: '#f5222d'
                },
                areaStyle: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        {
                            offset: 0,
                            color: 'rgba(245, 34, 45, 0.3)'
                        },
                        {
                            offset: 1,
                            color: 'rgba(245, 34, 45, 0.1)'
                        }
                    ])
                }
            },
            {
                name: '湿度',
                type: 'line',
                yAxisIndex: 1,
                data: props.chartData.map(item => item.humidity),
                smooth: true,
                symbol: 'circle',
                symbolSize: 6,
                itemStyle: {
                    color: '#1890ff'
                },
                lineStyle: {
                    width: 3,
                    color: '#1890ff'
                },
                areaStyle: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        {
                            offset: 0,
                            color: 'rgba(24, 144, 255, 0.3)'
                        },
                        {
                            offset: 1,
                            color: 'rgba(24, 144, 255, 0.1)'
                        }
                    ])
                }
            }
        ],
        animation: true,
        animationDuration: 1000,
        animationEasing: 'cubicInOut'
    };

    chart.setOption(option);

    window.addEventListener('resize', resizeChart);
};

const updateChart = () => {
    if (!chart) return;

    chart.setOption({
        xAxis: [
            {
                data: props.chartData.map(item => item.time)
            }
        ],
        series: [
            {
                data: props.chartData.map(item => item.temperature)
            },
            {
                data: props.chartData.map(item => item.humidity)
            }
        ]
    });
};

const resizeChart = () => {
    chart && chart.resize();
};

watch(() => props.chartData, () => {
    updateChart();
}, { deep: true });

onMounted(() => {
    initChart();
});

onBeforeUnmount(() => {
    if (chart) {
        chart.dispose();
        chart = null;
    }
    window.removeEventListener('resize', resizeChart);
});
</script>

<style scoped>
.chart-container {
    width: 100%;
    height: 300px;
}
</style>